<template>
	<div :class="['sw_tag_input', { focus: isFocus }]">
		<el-tag v-bind="tagConfig" v-for="(tag, index) in selecteds" :key="index" @close="handleCloseTag(index)" @click="handleTabClick(index)">
			{{ tag }}
		</el-tag>
		<el-input
			:size="formSize"
			v-model="inputValue"
			:placeholder="placeholder"
			:class="{ error: isError }"
			@blur="handleInputBlur"
			@focus="handleInputFocus"
			@keyup.188.native="handleEnterConfirm"
			@paste.native.prevent="handleInputPaste"
			@keyup.enter.native="handleEnterConfirm"
			@keyup.delete.native="handleDeleteConfirm"
		></el-input>
	</div>
</template>

<script>
import lodash from 'lodash';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	name: 'swTagInput',
	mixins: [emitter],
	inject: ['elForm'],
	props: {
		value: { type: String, default: '' },
		placeholder: String
	},
	data() {
		return {
			tagConfig: {
				type: 'info',
				closable: true,
				disableTransitions: true,
				size: this.elForm ? this.elForm.size || '' : ''
			},
			nameValue: this.value,
			selecteds: [],
			initialValue: '',
			isDelete: false,
			inputValue: '',
			isFocus: false,
			isError: false
		};
	},
	computed: {
		formSize() {
			return this.elForm ? this.elForm.size || '' : '';
		}
	},
	watch: {
		value(val) {
			this.nameValue = val;
		},
		nameValue(val) {
			this.$emit('input', val);
		},
		selecteds(arr) {
			this.nameValue = arr.join();
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		},
		inputValue(val) {
			if (val !== this.initialValue) {
				this.isError = false;
			}
			if (val.length > 0) {
				this.isDelete = false;
			}
		}
	},
	methods: {
		//添加标签
		addTagEvent(name) {
			if (!!name && !this.selecteds.some((n) => n === name)) {
				this.selecteds.push(name.trim().replace(/[,，]/g, ''));
				this.isDelete = true;
				this.inputValue = '';
				this.isError = false;
			} else {
				this.initialValue = lodash.cloneDeep(name);
				this.isDelete = false;
				this.isError = true;
			}
		},

		handleEnterConfirm() {
			this.addTagEvent(this.inputValue);
		},

		handleDeleteConfirm() {
			if (this.inputValue.length === 0) {
				this.isDelete && this.selecteds.pop();
				this.isDelete = true;
			}
		},

		//粘贴事件
		handleInputPaste(e) {
			let clipboardData = e.clipboardData || window.clipboardData;
			let pastedData = clipboardData.getData('Text');
			pastedData.split(/[,，]/g).forEach((item) => {
				this.addTagEvent(item);
			});
			this.isDelete = true;
		},

		//编辑标签
		handleTabClick(index) {
			this.inputValue = this.selecteds[index];
			this.selecteds.splice(index, 1);
		},

		//删除标签
		handleCloseTag(index) {
			this.selecteds.splice(index, 1);
		},

		handleInputFocus() {
			this.isFocus = true;
			this.isDelete = !this.inputValue;
		},

		handleInputBlur() {
			this.isFocus = false;
			this.isDelete = 0;
			this.addTagEvent(this.inputValue);
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_tag_input {
	display: flex;
	flex-wrap: wrap;
	border: solid 1px #dcdfe6;
	box-sizing: border-box;
	border-radius: 4px;
	overflow: hidden;
	padding: 2px;
	&.focus {
		border-color: var(--primary);
	}
	.el-tag::v-deep {
		display: inline-flex;
		align-items: center;
		padding: 0 5px 0 10px;
		line-height: 1;
		margin: 2px;
		height: 30px;
		.el-icon-close {
			position: unset;
			margin-left: 6px;
			line-height: 17px;
			transform: scale(1);
		}
		&.el-tag--medium {
			height: 26px;
		}
		&.el-tag--small {
			height: 22px;
		}
		&.el-tag--mini {
			height: 18px;
		}
	}
	.el-input::v-deep {
		flex: 1;
		min-width: 112px;
		box-sizing: border-box;
		&.el-input--medium .el-input__inner {
			height: 34px;
			line-height: 34px;
		}
		&.el-input--small .el-input__inner {
			height: 30px;
			line-height: 30px;
		}
		&.el-input--mini .el-input__inner {
			height: 26px;
			line-height: 26px;
		}
		&.error .el-input__inner {
			color: #f56c6c;
		}
		.el-input__inner {
			border: none;
			margin: -2px 0;
			padding: 0 6px;
		}
	}
}
</style>
